<template>
  <div>
    <el-container style="height: 940px;background-color: #E6E6E6;">
      <!-- 隐藏触发区域 -->
      <div class="trigger-area"
      @mouseenter="showMenuDrawer"
      >
      </div>
      <el-drawer class="menu-drawer" size="110px" v-model="showDrawer" direction="ltr" :with-header="false">
        <div style="height:100%;display: flex;align-items: center;">
          <el-menu background-color="transparent">
            <el-tooltip :index="item.id" v-for="item in menus" :key="item.id" :content="item.name" placement="right">
              <el-menu-item @click="OnMenuItemSelected(item.id)">
                <el-icon style="margin-right: 0px;">
                  <img :src="item.icon"/>
                </el-icon>
              </el-menu-item>
            </el-tooltip >
          </el-menu>
        </div>
      </el-drawer>
      <el-main>
        <MainView v-if="mainViewUpdate" :viewType="viewType"></MainView>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {inject } from 'vue';
import MainView from './views/MainView.vue'
import config from '@/configs/config';

export default {
  components: {
    MainView
  },
  data() {
    return {
      wsDomain:"ws://"+config.server.ip+":"+config.server.port,
      edsws:null,
      menus: [
        { "id": "000", "icon":require("@/assets/home.png"),"name": "主页" },
        { "id": "001", "icon":require("@/assets/comp.png"), "name": "数据组件" },
        { "id": "002", "icon":require("@/assets/cluster.png"), "name": "集群管理" },
      ],
      viewType: "000",
      mainViewUpdate:true,
      showAllMsgNum: false,
      showDrawer:false,
    }
  },


  mounted(){
    this.InitWebSocket()
  },


  methods: {
    InitWebSocket(){
      this.edsws=inject("$edsws")
      this.edsws.connect(this.wsDomain+"/clusters/websocketconn")
    },

    showMenuDrawer(){
      this.showDrawer=true
    },

    

    OnMenuItemSelected(index) {
      if(index=="003"){
        this.progressMsg.splice(0)
      }
      this.viewType = index
      this.mainViewUpdate = false
      this.showAllMsgNum=false
      this.$nextTick(()=>{
        this.mainViewUpdate = true
      })
    },

    ShowMsgNum(menuId){
      if (menuId=="003" && this.progressMsg.length>0){
        return true
      }else{
        return false
      }
    }

  }
}

</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: le;
  color: #2c3e50;
}

.trigger-area {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 100%;
  background-color: transparent;
  z-index: 10;
}


// .layout_container .el-aside {
//   border-right: solid 1px var(--el-border-color);
//   color: var(--el-text-color-primary);
//   background: var(--el-color-primary-light-1);
// }

.menu-drawer {
  background-color: #4D4D4D;
}


.el-menu {
 border:none
}


</style>
